<template>
	<div class="uiue-card" style="padding-top: 0">
		<a-tabs v-model:activeKey="currentIndex" class="tabss" @change="handleClick">
			<a-tab-pane v-for="item in configData" :key="item.key" :tab="item.txt">
				<!-- <div class="tit" style="margin-top: 10px">配置信息</div>
				<component :ref="(el) => getRiskSpreadRef(el, index)" :is="item.comp"></component> -->
			</a-tab-pane>
		</a-tabs>

		<div class="tit" style="margin-top: 10px">配置信息</div>

		<!-- 变更 -->
		<PortalForm ref="portal" v-show="currentIndex == '1'" />
		<MobileForm ref="mobile" v-show="currentIndex == '2'" />
		<androidForm ref="android" v-show="currentIndex == '3'" />
		<iosForm ref="ios" v-show="currentIndex == '4'" />
		<umapForm ref="umap" v-show="currentIndex == '5'" />
	</div>
</template>

<script setup name="ConfigureForm">
import PortalForm from './portalForm.vue'
import MobileForm from './mobileForm.vue'
import androidForm from './androidForm.vue'
import iosForm from './iosForm.vue'
import umapForm from './umapForm.vue'
import tool from '@/utils/tool'
const emit = defineEmits({ current: null })

const mobile = ref()
const portal = ref()
const android = ref()
const ios = ref()
const umap = ref()
// 业务部门审核环节不显示配置信息
const ishs = computed(() => {
	return currentName.value === '业务部门审核'
})
const props = defineProps({
	appAccess: String
})
const currentIndex = ref('1')
const tabData = ref([{}])
const isBack = computed(() => {
	return tool.session.get('stepId') === 'a001' ? true : false
})
const tableName = inject('tableName')
const datas = inject('detailDate')

const config = [
	{ txt: '门户Html', key: '1', oid: 'PC', comp: PortalForm, refStr: 'portal' },
	{ txt: '移动端Html', key: '2', oid: 'APP', comp: MobileForm, refStr: 'mobile' },
	{ txt: 'Android', key: '3', oid: 'ANDROID', comp: androidForm, refStr: 'android' },
	{ txt: 'IOS', key: '4', oid: 'IOS', comp: iosForm, refStr: 'ios' },
	{ txt: '移动端UMAP', key: '5', oid: 'UMAP', comp: umapForm, refStr: 'umap' }
]
const configData = computed(() => {
	let arr = []
	arr = config.filter((v) => props.appAccess.includes(v.key))
	return arr
})

const setData = (appAccess) => {
	let arr1 = []
	if (appAccess instanceof Array) {
		arr1 = appAccess
	} else {
		arr1 = appAccess.split(',')
	}
	currentIndex.value = arr1[0]

	emit('current', currentIndex.value)
}

watch(
	() => props.appAccess,
	(newData) => {
		// console.log(newData)
		if (newData.length > 0) {
			setData(newData)
		}
	},
	{ immediate: true }
)
const handleClick = (id) => {
	emit('current', id)
	if (id == currentIndex.value) {
		return
	}
	currentIndex.value = id
}
const tabsText = (item) => {
	let str = ''
	switch (item) {
		case '1':
			str = '门户端'
			break
		case '2':
			str = '移动端HTML'
			break
		case '3':
			str = 'Android'
			break
		case '4':
			str = 'Ios'
			break
		case '5':
			str = 'Umap'
			break
		default:
			break
	}
	return str
}
// 调取移动端的表单验证
const mobileValidate = async () => {
	const val = await mobile.value.formData
	return val
}
// 调取pc端的表单验证
const portalValidate = async () => {
	const val = await portal.value.formData
	return val
}
// 调取安卓的表单验证
const androidValidate = async () => {
	const val = await android.value.formData
	return val
}
// 调取ios的表单验证
const iosValidate = async () => {
	const val = await ios.value.formData
	return val
}
// 调取umap的表单验证
const umapValidate = async () => {
	const val = await umap.value.formData
	return val
}
defineExpose({
	mobileValidate,
	portalValidate,
	androidValidate,
	iosValidate,
	umapValidate
})
</script>

<style lang="less" scoped></style>
